#{extends 'posLogin.html' /}
#{set title: 'Bem-Vindo - CAbeceira' /}

<h3 style="margin-left: 10px; margin-top: 20px">Bem Vindo ${usuario}</h3>

<div id="pesquisaLivro">
	<h4>Pesquisar Livro</h4>
		<form action="@{Panel.listarLivros()}" id="buscaLivro">
			 Título
             <input type="radio" name="buscalivro" id="tituloRadio">
             ISBN
             <input type="radio" name="buscalivro" id="isbnRadio">
             Autor
             <input type="radio" name="buscalivro" id="autorRadio">
             <input type="text" name="textoLivro" id="textoLivro"/>
             <button type="submit" id="pesquisaPrincipal">
                 Pesquisar
             </button>
		</form>
</div>

<div id="minhasNotificacoes">
<h3 style="margin-left: 5px; margin-top: 15px">Notificações</h3>
	#{if notificacoes.size() <=0}
			<p>Nenhuma Notificação</p>
	#{/if}
	#{list items:notificacoes, as:'notificacao'}
	<ul>
    <li><img id="alertaIcone" src="@{'/public/images/notification-icon.png'}"/>${notificacao}</li>
    </ul>
	#{/list}
	#{if notificacoes.size()>4}
	<a id="listarNotificacoes" href="@{Panel.listarNotificacoes()}">Ver Todas</a>
	#{/if}
	#{if notificacoes.size()>0}
	<div id="limparNotificaoesIcone">
	<a href="@{Panel.limparAreaNotificacao()}" title="Apagar Notificações"><img src="@{'/public/images/limpar.png'}" alt="limpar"/></a>
	</div>
	#{/if}
</div>